import React, { Component } from 'react';
import {
  Text,
  View,
  StyleSheet,
  ScrollView,
  ImageBackground,
  SectionList,
} from 'react-native';
import { px2dp } from 'bee/utils/px2dp';
import { request } from 'bee/utils';
import { colors, sizes } from 'bee/themes';
import { BackBtn, MoreBtn } from 'bee/navigations';
import PropTypes from 'prop-types';
import Tabs from 'bee/components/Tabs';
import { PrimaryBtn } from 'bee/components/Buttons';

export default class ProductDetails extends Component<Prop> {
  static navigationOptions = {
    title: ' ',
    header: null,
    gesturesEnabled: true,
  };

  constructor() {
    super();

    this.state = {
      riskname: '',
      insured: '',
      sellPoint: [],
      insurancePlan: [],
      guaranteeRange: [],
    };
  }

  componentDidMount() {
    request('/productDetails')
      .then(data => {
        console.log(data);

        this.setState({
          riskname: data.riskname,
          insured: data.insured,
          sellPoint: data.sellPoint,
          insurancePlan: data.insurancePlan,
          guaranteeRange: data.guaranteeRange,
        });
      })
      .catch(e => {
        console.error(e);
      });
  }

  _renderSectionHeader = ({ section }) => (
    <View style={[styles.sectionListContainer, styles.sectionKeyLayout]}>
      <Text style={[styles.dotFont]}>{section.key}</Text>
    </View>
  );

  _renderItem = ({ item }) => (
    <View style={[styles.sectionListContainer, styles.sectionItemLayout]}>
      <Text style={styles.normalItemFontSize}>{item.left}</Text>
      <Text style={styles.normalItemFontSize}>{item.right}</Text>
    </View>
  );

  render() {
    return (
      <View>
        <ScrollView
          showsVerticalScrollIndicator
          style={{ marginBottom: px2dp(125) }}
        >
          {/* 标题图片 */}
          <ImageBackground style={styles.topImage}>
            <View style={styles.topImageBox}>
              <BackBtn navigation={this.props.navigation} />
              <View style={styles.titleBox}>
                <Text style={styles.titleText}>产品详情</Text>
              </View>
              <MoreBtn />
            </View>
          </ImageBackground>

          {/* 险种名称 */}
          <View style={styles.risknameBox}>
            <View style={styles.risknameUpperBox}>
              <Text>
                {/* 险种名称 */}
                <Text style={styles.risknameText}>
                  {this.state.riskname}&nbsp;
                </Text>
                {/* 投保人数 */}
                <Text style={[styles.normalItemFontSize, styles.insuredNumber]}>
                  &nbsp;{this.state.insured}人已投保
                </Text>
              </Text>
            </View>
            {/* 卖点 */}
            <View style={styles.dotBox}>
              {this.state.sellPoint.map((value, key) => (
                <Dot title={value} key={key} />
              ))}
            </View>
          </View>

          <SectionList
            style={styles.blank}
            sections={this.state.insurancePlan}
            renderSectionHeader={this._renderSectionHeader}
            renderItem={this._renderItem}
          />

          <SectionList
            style={styles.blank}
            sections={this.state.guaranteeRange}
            renderSectionHeader={this._renderSectionHeader}
            renderItem={this._renderItem}
          />

          <Tabs
            tabNames={['产品介绍', '案例分析', '理赔须知']}
            containerStyle={[styles.containerStyle, styles.blank]}
            defaultTextStyle={styles.defaultTextStyle}
            selectedTextStyle={styles.selectedTextStyle}
            selectedTabStyle={styles.selectedTabStyle}
          >
            <Text>
              <Text>
                产品介绍产品介绍产品介绍产品介绍产品介绍产产品介绍产品介绍产品介绍产品介绍产品介绍产产品介绍产品介绍产品介绍产品介绍产品介绍产产品介绍产品介绍产品介绍产品介绍产品介绍产产品介绍产品介绍产品介绍产品介绍产品介绍产产品介绍产品介绍产品介绍产品介绍产品介绍产产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍
              </Text>
            </Text>
            <Text>案例分析</Text>
            <Text>理赔须知</Text>
          </Tabs>
        </ScrollView>
        <View style={styles.PrimaryBtnFixStyle}>
          <PrimaryBtn
            text="立即投保"
            onPress={() => this.props.navigation.navigate('MakePlan')}
            // bgc="colors[1001]"
          />
        </View>
      </View>
    );
  }
}

const Dot = ({ title }) => (
  <View style={styles.sellingPoints}>
    <View style={styles.dot} />
    <Text style={styles.dotFont}>{title}</Text>
  </View>
);

Dot.propTypes = {
  title: PropTypes.string.isRequired,
};

const styles = StyleSheet.create({
  topImage: {
    height: px2dp(369),
    width: '100%',
    backgroundColor: colors['1001'],
  },
  topImageBox: {
    marginTop: px2dp(60),
    marginBottom: px2dp(257),
    flexDirection: 'row',
    justifyContent: 'space-around',
  },
  titleBox: {
    alignItems: 'center',
    flex: 1,
  },
  titleText: {
    fontSize: sizes.f4,
    fontWeight: 'normal',
    color: colors['1101'],
  },
  risknameBox: {
    height: px2dp(120),
    paddingVertical: px2dp(19),
    paddingHorizontal: px2dp(32),
    backgroundColor: colors.white,
  },
  risknameUpperBox: {
    height: '50%',
    flexDirection: 'row',
  },
  risknameText: {
    fontSize: sizes.f3,
    color: colors['1101'],
    // marginRight: px2dp(50),
  },
  normalItemFontSize: {
    fontSize: sizes.f1,
    color: colors['1102'],
  },
  insuredNumber: {},
  sellingPoints: {
    // marginLeft: px2dp(43),
    marginRight: px2dp(50),
    flexDirection: 'row',
    alignItems: 'center',
    // borderWidth: StyleSheet.hairlineWidth,
    // borderColor: colors.black,
  },
  dot: {
    height: px2dp(13),
    width: px2dp(13),
    backgroundColor: colors['1104'],
    borderRadius: px2dp(100),
    overflow: 'hidden',
    marginHorizontal: px2dp(10),
  },
  dotFont: {
    fontSize: sizes.f2,
    color: colors['1101'],
  },
  dotBox: {
    height: '50%',
    flexDirection: 'row',
    alignItems: 'flex-end',
  },
  blank: {
    marginTop: px2dp(17),
  },
  sectionListContainer: {
    height: px2dp(80),
    paddingHorizontal: px2dp(32),
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: colors['1104'],
    backgroundColor: colors.white,
  },
  sectionKeyLayout: {
    justifyContent: 'center',
  },
  sectionItemLayout: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  containerStyle: {
    height: px2dp(80),
    alignItems: 'center',
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: colors['1104'],
    backgroundColor: colors.white,
  },
  defaultTextStyle: {
    fontSize: sizes.f2,
    color: colors['1101'],
  },
  selectedTextStyle: {
    fontSize: sizes.f2,
    color: colors['1001'],
  },
  selectedTabStyle: {
    borderBottomWidth: px2dp(4),
    borderBottomColor: colors[1001],
  },
  PrimaryBtnFixStyle: {
    width: '100%',
    position: 'absolute',
    // left: 0,
    bottom: 0,
  },
});
